<template>
  <div>
    <!-- :inline="true" 表单一行显示 -->
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchMap"
      style="margin-top: 20px"
    >
      <!-- 重置会看 el-form-item 组件元素的 prop 上是否指定了字段名，指定了才会重置生效 -->
      <el-form-item prop="name">
        <el-input
          v-model="searchMap.name"
          placeholder="商品名称"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="searchMap.code"
          placeholder="商品编号"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="supplierId">
        <el-input
          readonly
          @click.native="openSearchSupplier"
          v-model="searchMap.supplierName"
          placeholder="选择供应商"
          style="width: 200px"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格显示列表 -->
    <el-table :data="list" stripe border style="width: 100%">
      <!-- type="index"获取索引值，从1开始 ，label显示标题，prop 数据字段名，width列宽 -->
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column
        prop="code"
        label="商品编码"
        width="200"
      ></el-table-column>
      <el-table-column prop="spec" label="商品规格"></el-table-column>
      <el-table-column prop="retailPrice" label="零售价"></el-table-column>
      <el-table-column prop="purchasePrice" label="进货价"></el-table-column>
      <el-table-column prop="storageNum" label="库存数量"></el-table-column>
      <el-table-column prop="supplierName" label="供应商"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      class="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <add-app
      :dialogVisible="dialogVisible"
      :pojo="pojo"
      :selectSupplier="selectSupplier"
      :closeDialog="closeDialog"
      :openAddOrEditSupplier="openAddOrEditSupplier"
    ></add-app>

    <!-- 选择供应商对话框 -->
    <supplier
      :dialogSupplierVisible="dialogSupplierVisible"
      :selectSupplier="selectSupplier"
    ></supplier>
  </div>
</template>

<script>
import goodsApi from "@/api/goods";
import Supplier from "./Supplier";
import AddApp from "./AddApp";

export default {
  data() {
    return {
      list: [],
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示10条数据,
      searchMap: {},

      dialogVisible: false,

      pojo: {
        name: "",
        code: "",
        spec: "",
        retailPrice: 0,
        purchasePrice: 0,
        storageNum: 0,
        supplierName: "",
      },
      dialogSupplierVisible: false,
      isSearch: false,
    };
  },

  components: { Supplier, AddApp },

  created() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      const { data } = await goodsApi.search(
        this.currentPage,
        this.pageSize,
        this.searchMap
      );
      this.list = data.rows;
      this.total = data.total;
    },

    // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fetchData();
    },
    // 当页码改变后,被触发 , val 是最新的页面
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },

    search() {
      this.currentPage = 1;
      this.fetchData();
    },

    resetForm() {
      this.searchMap = {};
    },

    handleAdd() {
      this.dialogVisible = true;
    },

    async handleEdit(id) {
      var resp = await goodsApi.getById(id);
      this.pojo = resp.data;
      this.dialogVisible = true;
    },

    closeDialog() {
      this.fetchData();
      this.pojo = {
        name: "",
        code: "",
        spec: "",
        retailPrice: 0,
        purchasePrice: 0,
        storageNum: 0,
        supplierName: "",
      }, 
      this.dialogVisible = false;
    },

    handleDelete(id) {
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        // 确认
        goodsApi.deleteById(id).then((resp) => {
          this.$message({
            message: resp.message,
            type: "success",
          });
          // 删除成功，刷新列表数据
          this.fetchData();
        });
      });
    },

    // 打开供应商的选择都在下边
    openSearchSupplier() {
      this.isSearch = true;
      this.dialogSupplierVisible = true;
    },

    openAddOrEditSupplier() {
      this.dialogSupplierVisible = true;
    },

    selectSupplier(supplier) {
      if (this.isSearch) {
        this.searchMap.supplierId = supplier.id;
        this.searchMap.supplierName = supplier.name;
      } else {
        this.pojo.supplierId = supplier.id;
        this.pojo.supplierName = supplier.name;
      }
      this.isSearch = false;
      this.dialogSupplierVisible = false;
    },
  },
};
</script>

<style scoped>
.fenye {
  position: fixed;
  bottom: 0px;
  left: 40%;
}
</style>